<template>
  <div id="left">


    <div class="top">
      <div class="title">
        <title-bar>
          <template #img><img src="../../assets/images/货车.png" alt="" class="img" /></template><template
            #header>大宗运输进度</template><template #subhead>Transport statistics</template>
        </title-bar>
      </div>
      <div class="container">
        <Top></Top>
      </div>
    </div>


    <div class="center">
      <div class="title">
        <title-bar>
          <template #img><img src="../../assets/images/数量.png" alt="" class="img" /></template> <template
            #header>历月总物流数</template><template #subhead>History num</template>
        </title-bar>
      </div>
      <div class="container">
        <Hsum ref="hsumChart"></Hsum>
      </div>
    </div>


    <div class="bottom">
      <div class="title">
        <title-bar>
          <template #img><img src="../../assets/images/分类.png" alt="" class="img" /></template> <template
            #header>汽运数量</template><template #subhead>Motor transport num</template>
        </title-bar>
      </div>
      <motorTransportNum></motorTransportNum>
    </div>


  </div>
</template>

<script setup lang="ts">
import Top from "./mode.vue";
import Hsum from "./hsum.vue";
import { onMounted, ref } from "vue";
import motorTransportNum from "./motorTransportNum.vue";
import titleBar from "../scatteredContainer/titleBar.vue";

let hsumChart = ref("")

onMounted(() => {
  hsumChart.value.resizeChart()
})
</script>

<style scoped lang="scss">
#left {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  align-items: center;
  flex-direction: column;
  justify-content: center;


  .center,
  .bottom {
    flex: 4;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

  }

  .top {
    flex: 3;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}

.title {
  height: 40px;
}

.container {
  flex: 1;
  overflow: hidden;
}
</style>